<template>
<el-row class="container">
    <el-col :span="24" class="header">
        <el-col :span="10" class="logo" :class="collapsed ? 'logo-collapse-width' : 'logo-width'">
            {{ collapsed ? "" : "仕途APP" }}
        </el-col>
        <el-col :span="6">
            <div class="tools" @click.prevent="collapse">
                <i class="fa fa-align-justify"></i>
            </div>
        </el-col>
        <div class="userinfo">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link userinfo-inner">
                    {{ user.name }}
                    <i><img v-if="user.userface != ''" :src="user.userface" /></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="install">设置</el-dropdown-item>
                    <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-col>
    <el-col :span="24" class="main">
        <aside :class="collapsed ? 'menu-collapsed' : 'menu-expanded'">
            <el-menu :default-active="$route.path" @open="handleopen" @close="handleclose" @select="handleselect" unique-opened router v-show="!collapsed">
             <!-- 新闻管理 -->
                <!-- <template>
                    <el-submenu index="13">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">新闻管理</span>
                        </template>
                        <el-menu-item index="/shop/xinwen" width=" 180px">
                            <router-link tag="li" to="/shop/xinwen">添加新闻</router-link>
                        </el-menu-item>
                    </el-submenu>
                </template> -->
                <!-- 分类管理 -->
                <!-- <template>
                    <el-submenu index="10">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">分类管理</span>
                        </template>
                        <el-menu-item index="/shop/xitiList" width="180px">
                            <router-link tag="li" to="/shop/xitiList">部门分类</router-link>
                        </el-menu-item>
                        <el-menu-item index="/shop/zhangjie" width=" 180px">
                            <router-link tag="li" to="/shop/zhangjie">章节类目</router-link>
                        </el-menu-item>
                    </el-submenu>
                </template> -->
                 <!-- 习题管理 -->
                <!-- <template>
                    <el-submenu index="/tiku">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">习题管理</span>
                        </template>
                        <el-menu-item index="/quiz/select/list" width=" 180px">
                            <router-link tag="li" to="/quiz/select/list">题库管理</router-link>
                        </el-menu-item>
                         <el-menu-item index="/shijuan" width=" 180px">
                            <router-link tag="li" to="/shijuan">试卷管理</router-link>
                        </el-menu-item>
                         <el-menu-item index="/shop/examAnalysis" width="180px">
                            <router-link tag="li" to="/shop/examAnalysis">试卷分析</router-link>
                        </el-menu-item>
                    </el-submenu>
                </template> -->
                 <!-- 内容管理 -->
                <!-- <template>
                    <el-submenu index="14">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">内容管理</span>
                        </template>
                        <el-menu-item index="/gongshi" width=" 180px">
                            <router-link tag="li" to="/gongshi">添加公式口诀</router-link>
                        </el-menu-item>
                        <el-menu-item index="/shop/xinwen" width=" 180px">
                            <router-link tag="li" to="/shop/xinwen">添加新闻</router-link>
                        </el-menu-item>
                    </el-submenu>
                </template> -->
                <template v-for="(item, index) in this.routes" v-if="!item.hidden">
                    <el-submenu :key="index" :index="index + ''">
                        <template slot="title">
                            <i :class="item.iconCls" style="color: #409eff"></i>
                            <span slot="title">{{ item.name }}</span>
                        </template>
                        <el-menu-item width="180px" v-for="child in item.children" :index="child.path" :key="child.path">{{ child.name }}
                        </el-menu-item>
                    </el-submenu>
                </template>

                <!-- <template>
                    <el-submenu>
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">商城管理</span>
                        </template>
                        <el-menu-item index="/shop/goodsList" width="180px">
                            <router-link tag="li" to="/shop/goodsList">商品分类列表</router-link>
                        </el-menu-item>
                        <el-menu-item index="/shop/goodsBanner" width="180px">
                            <router-link tag="li" to="/shop/goodsBanner">商城轮播图</router-link>
                        </el-menu-item>
                        <el-menu-item index="/shop/goods" width="180px">
                            <router-link tag="li" to="/shop/goods">商品列表</router-link>
                        </el-menu-item> -->
                        <!-- <el-menu-item index="/shop/chapter" width="180px">
                            <router-link tag="li" to="/shop/chapter">章节管理</router-link>
                        </el-menu-item> -->
                        <!-- <el-menu-item index="/shop/examAnalysis" width="180px">
                            <router-link tag="li" to="/shop/examAnalysis">试卷分析</router-link>
                        </el-menu-item> -->
                    <!-- </el-submenu>
                </template> -->
                
                <!-- 章节管理 -->
                <!-- <template>
                    <el-submenu index="11">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">章节管理</span>
                        </template>
                        <el-menu-item index="/shop/zhangjie" width=" 180px">
                            <router-link tag="li" to="/shop/zhangjie">章节类目</router-link>
                        </el-menu-item> -->
                        <!-- <el-menu-item index="" width=" 180px">
                            <router-link tag="li" to="">查询小节</router-link>
                        </el-menu-item> -->
                    <!-- </el-submenu>
                </template> -->
                
                <!-- 试卷管理 -->
                <!-- <template>
                    <el-submenu index="/shijuan">
                        <template slot="title">
                            <i class="el-icon-data-board" style="color: #409eff"></i>
                            <span slot="title">试卷管理</span>
                        </template>
                        <el-menu-item index="/shijuan" width=" 180px">
                            <router-link tag="li" to="/shijuan">试卷管理</router-link>
                        </el-menu-item>
                    </el-submenu>
                </template> -->
            </el-menu>
            <!--</div>-->

            <!--导航菜单-折叠后-->
            <ul class="el-menu collapsed min-menu" v-show="collapsed" ref="menuCollapsed">
                <li v-for="(item, index) in this.routes" v-if="!item.hidden" class="el-submenu item">
                    <div class="el-submenu__title" style="padding-left: 20px" @mouseover="showMenu(index, true)" @mouseout="showMenu(index, false)">
                        <i :class="item.iconCls" style="color: #409eff"></i>
                    </div>
                    <ul class="el-menu submenu" :class="'submenu-hook-' + index" @mouseover="showMenu(index, true)" @mouseout="showMenu(index, false)">
                        <li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" :class="$route.path == child.path ? 'is-active' : ''" @click="changeRoute(index, child.path)">
                            {{ child.name }}
                        </li>
                    </ul>
                </li>
            </ul>
        </aside>

        <section class="content-container">
            <div class="grid-content bg-purple-light breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
                </el-breadcrumb>

                <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
                    <el-dialog title="密码修改" :visible.sync="updatePwd">
                        <el-row>
                            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                                <el-input v-model="ruleForm.username" type="text" disabled></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
                                <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
                                <el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">
                                <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id="newkey1" type="password"></el-input>
                            </el-form-item>
                        </el-row>
                        <div style="text-align: center">
                            <el-button type="primary" @click="submitForm('ruleFormRef')">保存</el-button>
                        </div>
                    </el-dialog>
                </el-form>
            </div>
            <el-col :span="24" class="content-wrapper">
                <transition name="fade" mode="out-in">
                    <!--<keep-alive>-->
                    <!--<router-view v-if="this.$route.meta.keepAlive"></router-view>-->
                    <!--</keep-alive>-->
                    <router-view v-if="!this.$route.meta.keepAlive"></router-view>
                </transition>
            </el-col>
        </section>
    </el-col>
</el-row>
</template>

<script>
import axios from "axios";
export default {
    mounted: function () {
        //      this.devMsg();
        //       this.loadNF();
        //       this.loadUser();
        this.collapsed = this._isMobile();
        //console.log(this.$store.state.routes);
    },
    methods: {
        loadNF() {
            var _this = this;
            this.getRequest("/chat/sysmsgs").then((resp) => {
                var isDot = false;
                resp.data.forEach((msg) => {
                    if (msg.state == 0) {
                        isDot = true;
                    }
                });
                _this.$store.commit("toggleNFDot", isDot);
            });
        },
        changeRoute(i, route) {
            this.$refs.menuCollapsed.getElementsByClassName(
                "submenu-hook-" + i
            )[0].style.display = "none";
            this.$router.push(route);
        },
        handleopen(key, keyPath) {},
        handleclose() {
            ////console.log('handleclose');
        },
        handleselect: function (a, b) {},
        goChat() {
            this.$router.push({
                path: "/chat"
            });
        },
        devMsg() {
            this.$alert(
                "为了确保所有的小伙伴都能看到完整的数据演示，数据库只开放了查询权限和部分字段的更新权限，其他权限都不具备，完整权限的演示需要大家在自己本地部署后，换一个正常的数据库用户后即可查看，这点请大家悉知!",
                "友情提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                        this.$notify({
                            title: "重要重要!",
                            type: "warning",
                            message: "小伙伴们需要注意的是，目前只有权限管理模块完工了，因此这个项目中你无法看到所有的功能，除了权限管理相关的模块。权限管理相关的模块主要有两个，分别是 [系统管理->基础信息设置->权限组] 可以管理角色和资源的关系， [系统管理->操作员管理] 可以管理用户和角色的关系。",
                            duration: 0,
                        });
                    },
                }
            );
        },
        handleCommand(cmd) {
            var _this = this;
            if (cmd == "logout") {
                this.$confirm("注销登录, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        _this.getRequest("/logout");
                        _this.$store.commit("logout");
                        _this.$router.replace({
                            path: "/"
                        });
                    })
                    .catch(() => {
                        _this.$message({
                            type: "info",
                            message: "取消",
                        });
                    });
            }

            if (cmd == "install") {
                _this.updatePwd = true;
            }
        },

        //修改密码
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.postRequest("/sys/user/updatepassword", {
                        pass: this.ruleForm.pass,
                        newpass: this.ruleForm.newpass,
                    }).then((response) => {
                        if (response && response.status == 200) {
                            debugger;
                            var data = response.data;
                            this.$message({
                                type: data.status,
                                message: data.msg
                            });
                            this.updatePwd = false;
                        } else {
                            return false;
                        }
                    });
                }
            });
        },
        //折叠导航栏
        collapse: function () {
            this.collapsed = !this.collapsed;
        },
        showMenu(i, status) {
            this.$refs.menuCollapsed.getElementsByClassName(
                "submenu-hook-" + i
            )[0].style.display = status ? "block" : "none";
        },
        _isMobile() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            return flag;
        },
    },
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.newpass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            isDot: false,
            collapsed: false,
            updatePwd: false,
            password: null,
            user_id: this.$store.state.user.id,
            formLabelWidth: "100px",
            rules: {
                pass: [{
                    required: true,
                    message: "请输入密码"
                }],
                newpass: [{
                    required: true,
                    message: "请输入新密码"
                }],
                checknewpass: [{
                    required: true,
                    validator: validatePass2,
                    trigger: "blur"
                }, ],
            },
            ruleForm: {
                username: this.$store.state.user.username,
                pass: "",
                newpass: "",
                checknewpass: "",
            },
        };
    },
    computed: {
        user() {
            return this.$store.state.user;
        },
        routes() {
            return this.$store.state.routes;
        },
    },
};
</script>

<style scoped>
.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
}

.container .header {
    height: 60px;
    line-height: 60px;
    color: #fff;
    background: #409eff;
}

.container .header .userinfo {
    float: right;
    margin-right: 10px;
}

.container .header .userinfo .userinfo-inner {
    cursor: pointer;
    color: #fff;
}

.container .header .userinfo .userinfo-inner img {
    width: 24px;
    height: 24px;
    border-radius: 20px;
    margin: 17px 0px 10px 10px;
    float: right;
}

.container .header .logo {
    height: 60px;
    font-size: 22px;
    padding-left: 20px;
    padding-right: 20px;
    border-color: rgba(238, 241, 146, 0.3);
    border-right-width: 1px;
    border-right-style: solid;
}

.container .header .logo img {
    width: 40px;
    float: left;
    margin: 10px 10px 10px 18px;
}

.container .header .logo .txt {
    color: #fff;
}

.container .header .logo-width {
    width: 230px;
}

.container .header .logo-collapse-width {
    width: 60px;
}

.container .header .tools {
    padding: 0px 23px;
    width: 14px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
}

.container .main {
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 0px;
    /*background: #324057;*/
}

.container .main .suoding {
    font-size: 14px;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.container .main .suoding .el-row {
    margin-bottom: 0;
}

.container .main .userinfo {
    text-align: right;
    padding-right: 10px;
    float: right;
}

.container .main aside {
    flex: 0 0 230px;
    width: 230px;
}

.container .main aside .el-menu {
    height: 100%;
    /*background-color: #ececec;*/
}

.container .main aside .collapsed {
    width: 60px;
}

.container .main aside .collapsed .item {
    position: relative;
}

.container .main aside .collapsed .submenu {
    position: absolute;
    top: 0px;
    left: 60px;
    z-index: 99999;
    height: auto;
    display: none;
}

.container .main .menu-collapsed {
    flex: 0 0 60px;
    width: 60px;
}

.container .main .menu-expanded {
    flex: 0 0 230px;
    width: 230px;
}

.container .main .menu-expanded .el-menu {
    width: 100% !important;
}

.container .main .menu-expanded .el-submenu .el-menu-item {
    min-width: 0px !important;
}

.container .main .content-container {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
}

.container .main .content-container .breadcrumb-container .title {
    width: 200px;
    float: left;
    color: #475669;
}

.container .main .content-container .breadcrumb-container .breadcrumb-inner {
    float: right;
}

.container .main .content-container .content-wrapper {
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 0;
}

.breadcrumb {
    padding: 6px;
    background-color: #fff;
    margin-bottom: 8px;
}

.min-menu .submenu {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    // background-color:#ecf5ff;
}

.min-menu .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
    min-width: 110px;
    padding: 0;
    text-align: center;
}
</style>
